.component-gradient-background {
  width: 500px;
  // height: 352px;
  position: relative;
  box-sizing: border-box;
  background: url(http://localhost:8085/static/images/shouye/组件背景.png) no-repeat center center;
  background-size: cover;
    // 响应式适配 - 基准分辨率为3952x1248
  // 默认情况下应用响应式适配
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862);
    transform-origin: top left;
    width: 250px;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733);
    transform-origin: top left;
  }
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955);
    transform-origin: top left;
  }
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: url(http://localhost:8085/static/images/shouye/组件背景.png) no-repeat center center;
  //   background-size: cover;
  //   pointer-events: none;
  // }
}


// 响应式支持
.responsive {
  @media (max-width: 1920px) {
    transform: scale(0.9);
    transform-origin: top left;
  }
  
  @media (max-width: 1440px) {
    transform: scale(0.7);
    transform-origin: top left;
  }
  
  @media (max-width: 1024px) {
    transform: scale(0.5);
    transform-origin: top left;
  }
  
  @media (max-width: 768px) {
    transform: scale(0.4);
    transform-origin: top left;
  }
}

// 设计模式样式
[data-component-name="ComponentBackground"] {
  &.selected {
    outline: 2px solid #0099ff;
    outline-offset: 2px;
  }
  
  &:hover {
    cursor: pointer;
  }
} 